<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;list-style: none; text-decoration: none; box-sizing: border-box;}
        html,body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #navigator {
            color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100vw;
            height: 60px;
            background: #456;
        }
        #navigator .nav {
            display: flex;
            justify-content: space-around;
        }
        #navigator .nav li {
            cursor: pointer;
            padding: 0 2rem;
            font-size: 13px;
            white-space: nowrap;
        }
        #navigator .nav li:hover {
            color: skyblue;
        }
        iframe {
            width: 100vw;
            height: 90vh;
        }
        
    </style>
</head>
<body>
<nav id="navigator">
    <div class="logo">MIUI</div>
    <ul class="nav">
        <a href="index.html" style="color: white;"><li>首页</li></a>
        <li>Lot开发者社区</li>
        <li>无障碍</li>
        <li>小米社区</li>
        <li>云服务</li>
        <li>小米金融</li>
        <li>小米商城</li>
        <li>小米爱开放平台</li>
        <li>企业团购</li>
        <li>资质证照</li>
        <li>协议规则</li>
        <li>app下载</li>
    </ul>
</nav>
<iframe class="iframe" src="./miuidetail.html" frameborder="0"></iframe>
</body>
<script>
    const all = document.querySelectorAll('.nav li');
    const iframe = document.querySelector('.iframe');
    all[1].addEventListener('click', () => {
        iframe.src = './lot.html';
    });
    all[2].addEventListener('click', () => {
        iframe.src = './wuzhangai.html';
    });
    all[3].addEventListener('click', () => {
        iframe.src = './shequ.html';
    });
    all[4].addEventListener('click', () => {
        iframe.src = './cloudserver.html';
    });
    all[5].addEventListener('click', () => {
        iframe.src = './xiaomijinrong.html';
    });
    all[6].addEventListener('click', () => {
        location.href = 'index.html'
    });
    all[7].addEventListener('click', () => {
        iframe.src = './aikaifang.html'
    });
    all[8].addEventListener('click', () => {
        iframe.src = './qiyetuangou.html'
    });
    all[9].addEventListener('click', () => {
        iframe.src = './zhengzhao.html'
    });
    all[10].addEventListener('click', () => {
        iframe.src = './xieyiguize.html'
    });
    all[11].addEventListener('click', () => {
        iframe.src = './appdownload.html'
    });
</script>
</html>